<template>
  <Slot>
    <!-- 作用域插槽:在子组件动态绑定参数 派发给父组件的slot去使用 (带值的匿名插槽)-->
    <template #default="{ custom }">
      {{ custom }}
    </template>
    <!-- <template v-slot="{ custom }">
      {{ custom }}
    </template> -->

    <!-- 具名插槽 -->
    <template #header>
      <div>具名插槽 header</div>
    </template>
    <template #footer>
      <div>具名插槽 footer</div>
    </template>

    <!-- 匿名插槽，不可以和作用域插槽一起使用 -->
    <!-- <div>匿名插槽内容1</div> -->
    <!-- <template v-slot>
      <div>匿名插槽内容2</div>
    </template> -->

    <!-- 动态插槽，插槽可以是一个变量名 -->
    <template #[slotName]>
      <div>动态插槽，插槽可以是一个变量名</div>
    </template>
  </Slot>
</template>

<script setup lang="ts">
import Slot from './Slot.vue';
// 动态插槽，插槽可以是一个变量名
import { ref } from 'vue';
const slotName = ref<string>('slotName');
</script>

<style lang="scss" scoped></style>
